import React, { Component,createRef } from 'react'

export default class Form extends Component {

  constructor() {
    super()
    this.state = {
      city:['2']
    }
    this.address = createRef()
  }

  handleChange = (event) => {
    if(event.target.name === 'city'){
      console.log(event.target.value)
      if(this.state.city){
        this.state.city.push(event.target.value)
      }else{
        this.state.city=[event.target.value]
      }
      this.setState({})
      return
    }
    //数据的验证或者是过滤。。。
    // debugger;
    this.setState({
      [event.target.name]: event.target.value.toUpperCase()
    })
  }

  // handleChange1=(event)=>{
  //   //数据的验证或者是过滤。。。
  //   this.setState({
  //     desc:event.target.value.toUpperCase()
  //   })
  // }

  handleSubmit=()=>{
    // let address = this.refs.address.value;
    // console.log(address);
    console.log(this.address.current.value)
  }


  render() {
    return (
      <div>
        用户名： <input name="name" value={this.state.name}
          onChange={this.handleChange}
          type="text" /> <br></br>
      描述：<textarea name="desc" value={this.state.desc}
          onChange={this.handleChange}
          cols="30" rows="10"> 
        </textarea><br></br>
        城市：<select name="city" id=""
        multiple
          value={this.state.city}
          onChange={this.handleChange}
          >
            <option value="1">北京</option>
            <option value="2">太原</option>
            <option value="3">天津</option>
          </select><br></br>

          {/* <input ref="address" type="text"/> */}
          <input ref={this.address} type="text"/>
        <button onClick={this.handleSubmit}>提交</button>
      </div>
    )
  }
}
